<html>

<head>
    <title></title>
    <link rel="stylesheet" href="./css/main.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script
            src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
            crossorigin="anonymous"></script>
    <script src="https://www.fisco.com.cn/cdn/weevent/static/js/sockjs.min.js"></script>
    <script src="https://www.fisco.com.cn/cdn/weevent/static/js/stomp.umd.js"></script>
    <script src="./js/tool/jq-base64.js"></script>
    <script src="./js/live-demo.js"></script>
</head>

<body>
<div class="box" id='box'>
    <div class='broker'>
        <span>WeEvent Url</span> <input type="text" id='url' value="http://localhost:7000/weevent-broker/sockjs">
        <!-- <span class='filed-title'>用户名:</span>
        <input type="text" name="name" class="input-text checked login" id="user" >
        <span class='filed-title'>密码:</span>
        <input type="text" name="name" class="input-text checked login"  id="passWord"> -->
    </div>
    <section class="leftbox">
        <h2>Publish</h2>
        <div class="field connect-box">
            <input class="btn btn-success" type="button" value="Connect" id="connect">
            <input class="btn btn-ark disconnect" type="button" value="Disconnect" id="disconnect">
        </div>

        <div id="sendBox" class='publish-part'>
            <div class="field ">
                <span class='filed-title'><i class='dot'>*</i>Group:</span>
                <input type="text" name="name" class="input-text checked" placeholder="Group" id="group" value="1">
                <span class="warningbox">Empty GroupId</span>
            </div>
            <div class="field ">
                <span class='filed-title'><i class='dot'>*</i>Topic:</span>
                <input type="text" name="name" class="input-text checked" placeholder="Topic" id="topic">
                <span class="warningbox">Empty Topic</span>
            </div>
            <div class="field message">
                <span class='filed-title content'><i class='dot'>*</i>Content:</span>
                <textarea type="textarea" name="name" class="input-text checked" placeholder="Content" id="message"></textarea>
                <span class="warningbox">Empty Content</span>
            </div>
            <div class='new-header'>
                <span class='filed-title' style='width:130px'>Custom Header:</span> <span class='add-one' id='add-one'>+</span>
                <div class='new-item' id='newItem'>
                </div>
            </div>
            <div class="field connect-box">
                <input class="btn" type="button" value="Send" id="send">
            </div>
            <div class="input-text" placeholder="message" id="pub-message">
            </div>
            <button class='clear'>clear</button>
        </div>
    </section>
    <section class="rightbox">
        <h2>Subscribe</h2>
        <div class="field connect-box">
            <input class="btn" type="button" value="Connect" id="subscribe">
            <input class="btn btn-ark disconnect" type="button" value="Disconnect" id="dissubscribe">
        </div>
        <div id="sendBox" class='subscribe-part'>
            <div class="field">
                <span class='filed-title'><i class='dot'>*</i>Group:</span>
                <input type="text" name="name" class="input-text checked" placeholder="group" id="sendBox-group" value="1">
                <span class="warningbox">Empty GroupId</span>
            </div>
            <div class="field">
                <span class='filed-title'><i class='dot'>*</i>Topic:</span>
                <input type="text" name="name" class="input-text checked" placeholder="Topic" id="multiSubscribeTopic">
                <span class="warningbox">Empty Topic</span>
            </div>
            <div class="field sub-eventId">
                <span class='filed-title'><i class='dot'>*</i>Offset:</span>

                <input type="radio" id="end" name="drone" value="end" checked class='input_radio' style='margin-left:0'>
                <label for="end">from tail</label>

                <input type="radio" id="start" name="drone" value="start" class='input_radio'>
                <label for="start">from head</label>

                <input type="radio" id="last" name="drone" value="last" class='input_radio'>
                <label for="last">from last event</label>

                <input type="text" name="name" class="input-text checked" placeholder="Last EventId" value='OFFSET_LAST' id="eventId" disabled>
                <span class="warningbox">Empty EventId</span>
            </div>
            <div class="field" style='height:auto'>
                <span class='filed-title' style='width:150px;'>Custom header:</span>
                <span class='add-one' id='add-tag'>+</span>
            </div>
            <div id='tagList' class='new-item'>
            </div>

            <div class="field connect-box" id='filed-send'>
                <input class="btn" type="button" value="Subscribe" id="multiSubscribe">
                <input class="btn btn-ark" type="button" value="Unsubscribe" id="unsubscribe">
            </div>
            <div class="input-text" id="sub-message">
            </div>
            <button class='clear'>clear</button>
        </div>

    </section>
</div>
</body>
</html>